<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证用户名</title>
</head>
<body>
<div id="app">
    <div>
        <span>用户名：</span>
        <span><input type="text" v-model.lazy="uname"></span>
        <span>{{tip}}</span>
    </div>
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    /*
        侦听器
        1、采用监听器监听用户名的变化
        2、调用后台节后进行验证
        3、根据验证的结果调整提示信息
    */
    var vue = new Vue({
        el: "#app",
        data: {
            uname: "",
            tip: ""
        },
        methods: {
            //验证
            checkName: function (uname) {
                //调用接口，但是可以使用定时任务的方式模拟调用
                var that = this;
                setTimeout(function () {
                    //模拟接口调用
                    if (uname == "admin") {
                        that.tip = "用户名已经存在，请跟换一个";
                    } else {
                        that.tip = "用户名可以使用";
                    }
                },2000)
            }
        },
        watch: {
            uname: function (val) {
                //调用后台接口验证用户名的合法性
                this.checkName(val);
                //修改提示信息
                this.tip = "正在验证.....";
            }
        }
    })
</script>
</body>
</html>
